<template>
    <div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="订阅主题" prop="topic">
                <el-input v-model="formData.topic" placeholder="请输入订阅主题" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="车辆VIN" prop="vinName">
                <el-input v-model="formData.vin" placeholder="请输入车辆VIN" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="温度" prop="temperature">
                <el-input v-model="formData.temperature" placeholder="请输入温度" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="湿度" prop="humidity">
                <el-input v-model="formData.humidity" placeholder="请输入湿度" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="最高温度" prop="maxTemperature">
                <el-input v-model="formData.maxTemperature" placeholder="请输入温度" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="最低温度" prop="minTemperature">
                <el-input v-model="formData.minTemperature" placeholder="请输入温度" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="最高湿度" prop="maxHumidity">
                <el-input v-model="formData.maxHumidity" placeholder="请输入湿度" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="最低湿度" prop="minHumidity">
                <el-input v-model="formData.minHumidity" placeholder="请输入湿度" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <!-- <el-form-item label="速度" prop="speed">
                <el-input v-model="formData.speed" placeholder="请输入速度" clearable :style="{ width: '100%' }"></el-input>
            </el-form-item> -->
            <el-form-item label="模拟" prop="field107">
                <el-button type="primary" size="medium" @click="tabarStart()"> 模拟数据 </el-button>
                <el-button type="primary" size="medium" @click="tabarEnd()"> 结束模拟 </el-button>
            </el-form-item>
            <el-form-item label="发送" prop="field107">
                <el-button type="primary" size="medium" @click="start()"> 开始订阅 </el-button>
                <el-button type="primary" size="medium" @click="stop()"> 结束订阅 </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { mqtt } from "@/api/mqtt/mqtt";
export default {
    components: {},
    props: [],
    data() {
        return {
            options: [],
            sendStart: null,
            disable: true,
            time: '',
            formData: {
                topic: "mqtt/",
                vin: 'VIN88888888888888',
                temperature: null,
                humidity: null,
                maxTemperature: null,
                minTemperature: null,
                maxHumidity: null,
                minHumidity: null,
            },
            rules: {
                maxHumidity: [{
                    required: true,
                    message: '请输入最大湿度',
                    trigger: 'blur'
                }],
                minHumidity: [{
                    required: true,
                    message: '请输入最小湿度',
                    trigger: 'blur'
                }],
                minTemperature: [{
                    required: true,
                    message: '请输入最小温度',
                    trigger: 'blur'
                }],
                maxTemperature: [{
                    required: true,
                    message: '请输入最大温度',
                    trigger: 'blur'
                }],
                topic: [{
                    required: true,
                    message: '请输入订阅主题',
                    trigger: 'blur'
                }],
                vin: [{
                    required: true,
                    message: '请输入车辆VIN',
                    trigger: 'blur'
                }],
                temperature: [{
                    required: true,
                    message: '请输入温度',
                    trigger: 'blur'
                }],
                humidity: [{
                    required: true,
                    message: '请输入湿度',
                    trigger: 'blur'
                }],
                speed: [{
                    required: true,
                    message: '请输入速度',
                    trigger: 'blur'
                }],
            },
        }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() {


    },

    methods: {
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                // TODO 提交表单
            })
        },
        // 开始订阅
        tabarStart() {
            this.time = setInterval(() => {
                if (this.disable) {  // 开始订阅
                    // this.formData.speed = Math.round(Math.random() * 100); // 速度
                    this.formData.temperature = (Math.random() * 10).toFixed(2);  // 温度
                    this.formData.humidity = (Math.random() * 10).toFixed(2);  // 湿度\
                } else {
                    clearInterval(this.time);
                    this.disable = false;
                }
            }, 1000);

        },
        // 结束订阅
        tabarEnd() {
            // alert(this.disable)
            // this.formData = {};
            clearInterval(this.time);
            // this.disable = false;
        },
        //开始订阅
        start() {
            this.sendStart = setInterval(() => {
                mqtt(this.formData).then(obj => {
                    this.$message({
                        message: '发送成功',
                        type: 'success'
                    });
                });
            }, 5000)
        },
        stop() {
            clearInterval(this.sendStart);
            this.$message({
                message: '停止成功',
                type: 'success'
            });
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
    }
}

</script>
<style></style>
